<template>
  <div style="width: 100%; height: 100%">
    <div id="main">
      <el-row class="form">
        <el-col :span="2">
          <div class="roundBox">
            <img
              src="https://img0.baidu.com/it/u=1501450835,1988228522&fm=253&fmt=auto&app=138&f=JPEG?w=525&h=500"
              alt=""
              class="picture"
            />
          </div>
        </el-col>
        <el-col :span="10" class="first">
          <div class="tableDiv">
            <tr>
              <td>政务云</td>
            </tr>
            <tr>
              <td>{{ zwyun }}</td>
            </tr>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="roundBox">
            <img
              src="https://img2.baidu.com/it/u=21171422,736760041&fm=253&fmt=auto&app=138&f=JPEG?w=527&h=500"
              alt=""
              class="picture"
            />
          </div>
        </el-col>
        <el-col :span="10" class="first">
          <div class="tableDiv">
            <tr>
              <td>广域网</td>
            </tr>
            <tr>
              <td>{{ gywang }}</td>
            </tr>
          </div>
        </el-col>
      </el-row>
      <el-row class="form">
        <el-col :span="2">
          <div class="roundBox">
            <img
              src="https://img0.baidu.com/it/u=1501450835,1988228522&fm=253&fmt=auto&app=138&f=JPEG?w=525&h=500"
              alt=""
              class="picture"
            />
          </div>
        </el-col>
        <el-col :span="10" class="first">
          <div class="tableDiv">
            <tr>
              <td>政务云</td>
            </tr>
            <tr>
              <td>{{ zwyun }}</td>
            </tr>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="roundBox">
            <img
              src="https://img2.baidu.com/it/u=21171422,736760041&fm=253&fmt=auto&app=138&f=JPEG?w=527&h=500"
              alt=""
              class="picture"
            />
          </div>
        </el-col>
        <el-col :span="10" class="first">
          <div class="tableDiv">
            <tr>
              <td>广域网</td>
            </tr>
            <tr>
              <td>{{ gywang }}</td>
            </tr>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-button type="primary" @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "JumpView",

  data() {
    return {
      zwyun: "5.62%",
      gywang: "4.14%",
    };
  },

  mounted() {},

  methods: {
    back() {
      this.$router.push("./barView");
    },
  },
};
</script>

<style scoped>
#main {
  width: 800px;
  height: 100px;
  margin: 0 auto;
}
#main .first {
  background-color: darkgrey;
  margin-left: -20px;
  z-index: -1;
  position: relative;
  height: 45px;
  top: -4px;
}
#main .tableDiv {
  margin-left: 30px;
}
.form .roundBox {
  /* width: 36px; */
  /* height: 36px; */
  /* background-color: white; */
  /* border: 2px solid #3b3b3b; */
  /* border-radius: 25px; */
  /* z-index: 1; */
  margin-left: 30px;
}
#main .picture {
  width: 40px;
  height: 40px;
  background: rgb(90, 83, 83);
  margin-left: 20px;
  z-index: 1;
  position: relative;
  top: -4px;
  left: -30px;
  border-radius: 50%;
  border: 2px solid #3b3b3b;
}
</style>